$(function(){
    ko.bindingHandlers.jqDraggableList = {
        init: function(element, valueAccessor, allBindingsAccessor){
            
            var options = kjq.utils.getOptions(allBindingsAccessor);
            if(!valueAccessor().source){
                throw 'Source array("source" options) for jqDraggableList is undefined.';
            }
            if(!allBindingsAccessor().destinationClass){
                throw 'Destination class("destinationClass" options) for jqDraggableList is undefined.';
            }
            
            var source = valueAccessor().source;
            var destinationClass = allBindingsAccessor().destinationClass;
            
            $(element).append(ko.bindingHandlers.jqDraggableList.getSourceListComponent(source(), destinationClass));
            
            options.revert = 'invalid';
            $('.kjq-draggable').draggable(options);
        },
        
        getSourceListComponent: function(list, acceptClass){
            var componentId = kjq.utils.getRandomElementId();
            var content = '<ul id="'.concat(componentId,'" class="kjq-selectable-list">');     
            for(var x=0;x<list.length;x++){
                var listElement = '<li class="ui-state-default kjq-selectable-list ui-widget-content kjq-draggable '.concat(acceptClass, '">', list[x].toString(),'</li>');
                content = content.concat(listElement);
            }
            content.concat('</ul>');
            return $(content);
        }
    }
});